<template>
	<view class="pug-share-container">
		<view class="pug-share-box" :class="[show?'expand':'close']">
			<view class="itembox">
				<view class="item" @click="handleHbEvent">
					<view class="iconbox">
						 <icon class="siconfont icon-bianji"></icon>
					</view>
					<text>海报分享</text>
				</view>
				<!-- #ifdef APP -->
				<view class="item" @click="handleWeixin">
					<view class="iconbox">
						<icon class="siconfont icon-weixin"></icon>
					</view>
					<text>微信</text>
				</view>
				<view class="item" @click="handleWeixinFriend">
					<view class="iconbox">
						<icon class="siconfont icon-pengyouquan"></icon>
					</view>
					<text>朋友圈</text>
				</view>
				<view class="item" @click="handleWeibo">
					<view class="iconbox">
						<icon class="siconfont icon-xinlang"></icon>
					</view>
					<text>微博</text>
				</view>
				<view class="item" @click="handleQQ">
					<view class="iconbox">
						<icon class="siconfont icon-qq"></icon>
					</view>
					<text>QQ</text>
				</view>
				<!-- #endif -->
			</view>
			
			<view class="line"></view>
			
			<!-- 下方的分享内容 -->
			<view class="itembox itembox2">
				<view class="item" @click="handleFavorite">
					<view class="iconbox"><icon class="siconfont icon-shoucang"></icon></view>
					<text>收藏</text>
				</view>
				<view class="item" @click="handleCopy">
					<view class="iconbox"><icon class="siconfont icon-lianjie"></icon></view>
					<text>复制链接</text>
				</view>
				<view class="item" @click="handleCharacter">
					<view class="iconbox"><icon class="siconfont icon-zitidaxiao"></icon></view>
					<text>字体设置</text>
				</view>
				<view class="item" @click="handleSkin">
					<view class="iconbox"><icon class="siconfont icon-dark"></icon></view>
					<text>深色模式</text>
				</view>
				<view class="item" @click="handleOpen">
					<view class="iconbox"><icon class="siconfont icon-iosliulanqidakai"></icon></view>
					<text>浏览器</text>
				</view>

			</view>
		</view>
		
		<!-- 阴影区域 -->
		<view @click="show = false" class="pug-share-box-overlay" v-show="show"></view>
		
		<!-- 引入海报 -->
		<pug-share-hb :isShow="isshow" :painterItem="painterItem" @close="handleClose"></pug-share-hb>
		
	</view>
</template>

<script>
	export default {
		name:"pug-share",
		data() {
			return {
				// 控制分享组件
				show: false,
				// 控制海报是否显示
				isshow: false,
				// 海报数据
				painterItem: {}
			}
		},
		methods: {
			// 打开分享
			handleHbEvent(){
				this.isshow = true
				// 关闭底层的分享
				this.show = false
			},
			
			// 关闭海报
			handleClose(){
				this.isshow = false
			},
			
			// 打开海报
			openShare(painterItem){
				this.show = true
				this.painterItem = painterItem
			},
			// 复制链接
			handleCopy(){
				let that = this
				let data =  `标题：${this.painterItem.title}\n
				链接：http://www.kuangstudy.com/course/play/${this.painterItem.opid}?uid=${this.painterItem.userId}\n
				版权声明：本文为学相伴平台所有，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。`
				
				uni.setClipboardData({
					data,
					success: function(){
						uni.showToast({
							icon:"none",
							title:"复制成功！"
						})
						that.show = false
						that.openApp('weixin://')
					}
				})
			},
			// 字体处理
			handleCharacter(){
				// 记录操作
				this.$cache.set("fontsize",this.$cache.get("fontsize")==16?24:16);
				this.$emit("fontsize",this.$cache.get("fontsize"));
			},
			
			// 皮肤处理
			handleSkin(){
				// 记录操作
				this.$cache.set("skin",this.$cache.get("skin")=='light'?'dark':'light');
				this.$emit("skin",this.$cache.get("skin"));
			},
			// 浏览器打开
			handleOpen(){
				// #ifdef APP
				plus.runtime.openURL("https://www.kuangstudy.com");
				// #endif
				
				// #ifdef H5
				// 打开窗口
				window.open("https://www.kuangstudy.com")
				// 打开新页面
				//window.location.href = "xxxx";
				// #endif
				
				// #ifdef MP
				uni.redirectTo({
					url:"/pages/coursedetail/coursedetail?opid="+this.painterItem.opid
				})
				// #endif
			},
			// 打开应用
			openApp(appurl) {
				// #ifdef APP-PLUS
				plus.runtime.openURL(appurl, function(res) {
				});
				// #endif
				// #ifdef H5
				window.open(appurl);
				// #endif
			},
			// #ifdef APP
			// 微信朋友圈
			handleWeixinFriend(){
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 0,
					href: "http://www.kuangstudy.com/course/play/"+this.painterItem.opid+"?uid="+this.painterItem.userId+"&type=course",
					title: this.painterItem.title,
					summary: this.painterItem.description,
					imageUrl: this.painterItem.image,
					success: function (res) {
						console.log("分享到微信朋友圈成功:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			 
			// 微信好友
			handleWeixin(){
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "http://www.kuangstudy.com/course/play/"+this.painterItem.opid+"?uid="+this.painterItem.userId+"&type=course",
					title: this.painterItem.title,
					summary: this.painterItem.description,
					imageUrl: this.painterItem.image,
					success: function (res) {
						console.log("分享到微信好友成功:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			 
			// 微博分享
			handleWeibo(){
				uni.share({
					provider: "sinaweibo",
					scene: "WXSceneTimeline",
					type: 0,
					href: "http://www.kuangstudy.com/course/play/"+this.painterItem.opid+"?uid="+this.painterItem.userId+"&type=course",
					title: this.painterItem.title,
					summary: this.painterItem.description,
					imageUrl: this.painterItem.image,
					success: function (res) {
						console.log("分享到微博成功:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			  
			// QQ分享
			handleQQ(){
				uni.share({
					provider: "qq",
					scene: "WXSceneTimeline",
					type: 1,
					href: "http://www.kuangstudy.com/course/play/"+this.painterItem.opid+"?uid="+this.painterItem.userId+"&type=course",
					title: this.painterItem.title,
					summary: this.painterItem.description,
					success: function (res) {
						console.log("分享到QQ友好成功:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			// #endif
		}
		
	}
</script>

<style lang="scss">
	.pug-share-container{
		position: relative;
		z-index: 500;
		.pug-share-box{
			position: fixed;
			max-height: 50vh;
			left: 0;
			right: 0;
			bottom: -100%;
			background: #f7f8fa;
			z-index: 2;
			border-radius: 20rpx;
			padding: 20rpx;
			.line{
				height: 1px;
				width: 95vw;
				background: #eee;
			}
			.itembox{
				padding: 20rpx 30rpx 0;
				display: grid;
				grid-template-columns: repeat(5,1fr);
				grid-template-rows: repeat(2,auto);
				gap: 10rpx;
				.item{
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 20rpx;
					.iconbox{
						width: 56px;
						height: 52px;
						background: #fff;
						text-align: center;
						line-height: 52px;
						border-radius: 20rpx;
						margin-bottom: 15rpx;
						icon{
							font-size: 28px;
						}
					}
					text{
						font-size: 24rpx;
						color: #666;
					}
					
				}
				
			}
			.itembox2{
				padding: 20rpx 30rpx 0;
				flex-wrap: wrap;
			}
			
		}
		
		.pug-share-box.expand{
			bottom: 0;
			transition: 300ms ease;
		}
		.pug-share-box.close{
			bottom: -100%;
			transition: 700ms ease;
		}
		// 阴影层
		.pug-share-box-overlay{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0,0,0,0.2);
		}
	}

</style>